<template>
  <section>
    <van-sticky>
      <PageHeader title="服务套餐"/>
    </van-sticky>

    <van-tabs v-model="type" sticky @click="onTabChange">
      <van-tab title="套餐" name="service">
        <div class="pd10">
          <van-button type="primary" round block @click="$router.push({name: 'ServicePackageAdd'})">+添加</van-button>
        </div>
        <div class="flex flex-col bg-color-white mb10 font-common"
             v-for="(item, index) in servicePackages"
             :key="index">
          <div class="flex flex-row flex-left pd10 font-big strong">{{item.name}}</div>
          <div class="flex flex-row flex-left pd10">费用：{{item.price}}元</div>
          <div class="flex flex-row flex-left pd10">状态：<label v-if="item.is_sale==1">上架</label><label v-else-if="item.is_sale==0">下架</label></div>
          <div class="flex flex-row flex-center font-common border-top-gray pt10 pb10">
            <div class="flex flex-row flex-center flex-1" @click="$router.push({name: 'ServicePackageEdit', params: {id: item.id}})">
              <i class="iconfont icon-bianji mr5" />编辑
            </div>
            <div class="flex flex-row flex-center flex-1" @click="offline(index)" v-if="item.is_sale==1">
              <i class="iconfont icon-shangxianchanpin- mr5" />下线
            </div>
            <div class="flex flex-row flex-center flex-1" @click="online(index)" v-else-if="item.is_sale==0">
              <i class="iconfont icon-shangxian mr5" />上线
            </div>
            <div class="flex flex-row flex-center flex-1" @click="$router.push({name: 'ServicePackageOrderLists', query: {packageId: item.id}})">
              <i class="iconfont icon-baoming mr5" />订单管理
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="订单" name="order">

      </van-tab>
    </van-tabs>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Dialog, List, Search, Sticky, Tab, Tabs} from 'vant';
  import PageHeader from "../componets/PageHeader";
  import {
    BASE_STATIC_URL,
    servicePackageAllUri,
    servicePackageOfflineUri,
    servicePackageOnlineUri
  } from "../../common/api";
  Vue.use(Toast).use(Dialog).use(List).use(Search).use(Sticky).use(Tab).use(Tabs);

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        BASE_STATIC_URL: BASE_STATIC_URL,
        type: 'service',
        servicePackages: []
      }
    },
    methods: {
      onTabChange(name) {
        this.type = name;
        if(name == 'order') {
          this.$router.push({name: 'ServicePackageOrderLists'});
        }
      },
      getServicePackages() {
        const that = this;
        const url = servicePackageAllUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.servicePackages = data.packages;
          }
        }, response => {
          // error callback
        })
      },
      online(index) {
        const that = this;
        const url = servicePackageOnlineUri + '?id=' + this.servicePackages[index].id;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.servicePackages[index].is_sale = 1;
          }
        }, response => {
          // error callback
        })
      },
      offline(index) {
        const that = this;
        const url = servicePackageOfflineUri + '?id=' + this.servicePackages[index].id;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.servicePackages[index].is_sale = 0;
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {
      this.getServicePackages();
    }
  }
</script>

<style scoped>

</style>
